<template>
  <div class="q-pa-md">
    <t-layout
      view="hHh Lpr lff"
      container
      style="height: 300px"
      class="shadow-2 rounded-borders"
    >
      <t-header
        elevated
        :class="$q.dark.isActive ? 'bg-secondary' : 'bg-black'"
      >
        <t-toolbar>
          <t-btn flat @click="drawer = !drawer" round dense icon="menu" />
          <t-toolbar-title>Header</t-toolbar-title>
        </t-toolbar>
      </t-header>

      <t-drawer
        v-model="drawer"
        show-if-above
        :mini="!drawer || miniState"
        @click.capture="drawerClick"
        :width="200"
        :breakpoint="500"
        bordered
        :class="$q.dark.isActive ? 'bg-grey-9' : 'bg-grey-3'"
      >
        <template v-slot:mini>
          <t-scroll-area class="fit mini-slot cursor-pointer">
            <div class="q-py-lg">
              <div class="column items-start">
                <t-icon name="inbox" color="blue" class="mini-icon" />
                <t-icon name="star" color="orange" class="mini-icon" />
                <t-icon name="send" color="purple" class="mini-icon" />
                <t-icon name="drafts" color="teal" class="mini-icon" />
              </div>
            </div>
          </t-scroll-area>
        </template>

        <t-scroll-area class="fit">
          <t-list padding>
            <t-item clickable v-ripple>
              <t-item-section> Inbox </t-item-section>
            </t-item>

            <t-item active clickable v-ripple>
              <t-item-section> Star </t-item-section>
            </t-item>

            <t-item clickable v-ripple>
              <t-item-section> Send </t-item-section>
            </t-item>

            <t-item clickable v-ripple>
              <t-item-section> Drafts </t-item-section>
            </t-item>
          </t-list>
        </t-scroll-area>

        <!--
          in this case, we use a button (can be anything)
          so that user can switch back
          to mini-mode
        -->
        <div
          class="q-mini-drawer-hide absolute"
          style="top: 15px; right: -17px"
        >
          <t-btn
            dense
            round
            unelevated
            color="accent"
            icon="chevron_left"
            @click="miniState = true"
          />
        </div>
      </t-drawer>

      <t-page-container>
        <t-page class="q-px-lg q-py-md">
          <p v-for="n in 15" :key="n">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil
            praesentium molestias a adipisci, dolore vitae odit, quidem
            consequatur optio voluptates asperiores pariatur eos numquam rerum
            delectus commodi perferendis voluptate?
          </p>
        </t-page>
      </t-page-container>
    </t-layout>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      const miniState = ref(true);

      return {
        drawer: ref(false),
        miniState,

        drawerClick(e) {
          // if in "mini" state and user
          // click on drawer, we switch it to "normal" mode
          if (miniState.value) {
            miniState.value = false;

            // notice we have registered an event with capture flag;
            // we need to stop further propagation as this click is
            // intended for switching drawer to "normal" mode only
            e.stopPropagation();
          }
        },
      };
    },
  };
</script>

<style lang="sass" scoped>
  .mini-slot
    transition: background-color .28s
    &:hover
      background-color: rgba(0, 0, 0, .04)

  .mini-icon
    font-size: 1.718em
    padding: 2px 16px

    & + &
      margin-top: 18px
</style>
